<template>
<<<<<<< HEAD
  <div>
    <h2>我的</h2>
=======
  <div class="my-container">
    <div class="header">
      <div class="pic" v-if="$store.state.userInfo">
        <van-image
          width="100%"
          class="avatar"
          :src="$store.state.userInfo.headPortrait"
          round
          fit="cover"
        />
        <span class="text">{{ $store.state.userInfo.username }}</span>
      </div>
      <div class="pic" @click="$router.push('/login')" v-else>
        <van-image
          width="100%"
          class="avatar"
          src=""
          round
          fit="cover"
        />
        <span class="text">点击登录</span>
      </div>
    </div>
    <div class="card">
      <van-grid direction="vertical" :column-num="4.1" class="grid">
        <van-grid-item icon="column" text="个人资料" @click="showUserInfo = true" />
        <van-grid-item icon="manager" text="我的关注" @click="showMyAtt = true" />
        <van-grid-item icon="chat" text="我的评价"  />
        <van-grid-item icon="printer" text="已联系家政员" @click="showHouse = true" />
      </van-grid>
    </div>
    <div class="cell">
      <van-cell title="找家政服务记录" is-link icon="coupon" size="40px">
      </van-cell>
      <van-cell title="家政求职记录" is-link icon="comment" />
    </div>
    <div class="cell">
      <van-cell title="身份认证通道" is-link icon="checked" @click="show = true" />
      <van-cell title="关于我们" is-link icon="info" @click="showAboutUs = true" />
    </div>
    <user-info :show.sync="showUserInfo" />
    <my-attention :show.sync="showMyAtt" />
    <contact-housekeeping :show.sync="showHouse" />
    <van-popup v-model="show" position="bottom" :style="{ height: '14%' }">
      <van-cell title="家服人员授权认证" class="cell-item" :clickable="true" @click="permShow" />
      <van-cell title="家服公司管理员认证" :clickable="true" @click="admin" />
    </van-popup>
    <grant-permission :show.sync="showPermission" />
    <admin-permission :show.sync="showAdminPerm" />
    <about-us :show.sync="showAboutUs" />
>>>>>>> pc
  </div>
</template>

<script>
<<<<<<< HEAD
export default {

=======
import AboutUs from './components/about-us.vue'
import AdminPermission from './components/admin-permission.vue'
import ContactHousekeeping from './components/contact-housekeeping.vue'
import GrantPermission from './components/grant-permission.vue'
import MyAttention from './components/my-attention.vue'
import userInfo from './components/user-info.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      show: false,
      showUserInfo: false,
      showMyAtt: false,
      showHouse: false,
      showPermission: false,
      showAdminPerm: false,
      showAboutUs: false,
    }
  },
  components: { userInfo, MyAttention, ContactHousekeeping, GrantPermission, AdminPermission, AboutUs },
  methods: {
    permShow () {
      this.showPermission = true
      this.show = false
    },
    admin () {
      this.showAdminPerm = true
      this.show = false
    },
  },
  computed: {
    ...mapGetters('[userInfo]'),
  },
>>>>>>> pc
}
</script>

<style>

</style>
